<template>
    <div class="main project_info_jbxx">
        <div class="title">
            基本信息
            <i @click="closeFn"></i>
        </div>
        <div class="form">
            <el-form :model="ruleForm" ref="ruleForm" :rules="rules" label-width="111px" class="demo-ruleForm">
                <el-form-item label="项目简称" prop="shortName">
                    <el-input v-model="ruleForm.shortName" placeholder="请输入项目简称" v-if="editType == 'edit'"></el-input>
                    <span v-else v-text="data.shortName"></span>
                </el-form-item>
                <el-form-item label="项目分类" prop="projectTypeId">
                    <el-select v-model="ruleForm.projectTypeId" placeholder="请选择项目分类" v-if="editType == 'edit'">
                        <el-option v-for="(item,index) in typeList"  :key="index" :label="item.name" :value="item.id"></el-option>
                    </el-select>
                    <span v-else v-text="data.typeName"></span>
                </el-form-item>
                <el-form-item label="项目全称" prop="name">
                    <el-input v-model="ruleForm.name" placeholder="请输入项目全称" v-if="editType == 'edit'"></el-input>
                    <span v-else v-text="data.name"></span>
                </el-form-item>
                <el-form-item label="项目地点" prop="">
                    <el-input v-model="ruleForm.address" placeholder="请输入项目地点" v-if="editType == 'edit'"></el-input>
                    <span v-else v-text="data.address"></span>
                </el-form-item>
                <el-form-item label="设定时间" required>
                    <div v-if="editType == 'edit'">
                        <el-col style="float: left;width: 176px;">
                        <el-form-item prop="startTime">
                            <el-date-picker v-model="ruleForm.startTime" type="date" placeholder="开始时间" style="width: 100%;"></el-date-picker>
                        </el-form-item>
                        </el-col>
                        <el-col style="float: left;width: 48px;text-align: center" class="line line-time">至</el-col>
                        <el-col style="float: left;width: 176px;">
                            <el-form-item prop="endTime">
                                <el-date-picker v-model="ruleForm.endTime" type="date" placeholder="截止时间" style="width: 100%;"></el-date-picker>
                            </el-form-item>
                        </el-col>
                    </div>
                    <span v-else>{{ !!data.startTime == true ? new Date(data.startTime).Format('yyyy-MM-dd') :'' }} 至 {{ !!data.endTime == true ? new Date(data.endTime).Format('yyyy-MM-dd') : ''}}</span>
                </el-form-item>
                <el-form-item label="项目经理" required>
                    <div class="align-row-center"  v-if="editType == 'edit'">
                        <span class="add-manager mr8" @click="is_show_selectMember = true"></span>
                        <span v-text="ruleForm.managerName"></span>
                    </div>
                    <span v-else v-text="data.managerName"></span>
                </el-form-item>
                <el-form-item label="可见范围" required>
                    <el-select placeholder="请选择可见范围" v-model="ruleForm.visibility" v-if="editType == 'edit'">
                        <el-option label="参与人" :value="1"></el-option>
                        <el-option label="全公司" :value="2"></el-option>
                    </el-select>
                    <span v-else v-text="data.visibility == '1' ? '参与人' : '全公司'"></span>
                </el-form-item>
                <el-form-item label="项目简介" prop="">
                    <el-input type="textarea" v-model="ruleForm.content" :resize="'none'" placeholder="请输入项目简介"  v-if="editType == 'edit'"></el-input>
                    <span v-else v-text="data.content"></span>
                </el-form-item>
                <el-form-item>
                    <div class="modal-btns pr32">
                        <div class="save-btn" v-if="isManager == true && editType == 'see'" @click="editType = 'edit'">编辑</div>
                        <div class="save-btn" v-if="isManager == true && editType == 'edit'"  @click="submitForm('ruleForm')">保存</div>
                    </div>
                </el-form-item>
            </el-form>
        </div>
        <transition name="fade">
            <div class="main-popup"  v-if="is_show_selectMember">
                <select-member @close="closeModal" :title="'选择项目经理'" :select="ruleForm.managerId" @callback="selectMemberCallback" :indexClose="'is_show_selectMember'"/>
            </div>
        </transition>
    </div>
</template>

<script>
import selectMember from '@/components/base/selectMember'; //基本信息詳情
export default {
    name:'baseInfo',
    components: {
        selectMember
    },
    props:{
        data:{
            type: Object,
			required: {}
        }
    },
    data() {
        return {
            is_show_selectMember:false,
            isManager:false,
            editType:'see',
            ruleForm: {},
            rules:{
                shortName: [
                    { required: true, message: '请输入项目简称', trigger: 'blur' },
                ],
                projectTypeId: [
                    { required: true, message: '请选择项目分类', trigger: 'change' },
                ],
                // name: [
                //     { required: true, message: '请输入项目全称', trigger: 'blur' },
                // ],
                startTime: [
                    { required: true, message: '请选择开始时间', trigger: 'blur' },
                ],
                endTime: [
                    { required: true, message: '请选择截止时间', trigger: 'blur' },
                ],
            },
            typeList:[],
        }
    },
    created() {
        console.log(this.$store.state.userInfo);
        console.log(this.data,"data");
        if(this.data.managerId == this.$store.state.userInfo.userId){
            this.isManager = true;
        }
        this.ruleForm = JSON.parse(JSON.stringify(this.data));
    },
    mounted(){
        this.getProjectTypeList();
    },
    methods: {
      //关闭
      closeFn() {
          this.$emit("close",'is_show_jbxx');
      },
      closeModal(res){
        this[res] = false;
    },
      getProjectTypeList(){
        this.$http.get('/project/projectType/page', {
            params: {
                companyId: this.$store.state.userInfo.companyId,
                status:1, //启用
                pageSize: 999,

            }
        }).then( res =>{
            if(res.statusCode == 200){
                console.log(res,"====");
                this.typeList = res.data.list;
            }
        }).catch(error => {
            console.log(error);
        });
      },
      submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.$http.post("/project/project/update",this.ruleForm).then(res =>{
                        if(res.statusCode == 200){
                            this.$emit("callback",true);
                        }else{
                            this.$message({
                                message: res.statusMsg || '请求失败',
                                type: 'error'
                            });
                        }
                    }).catch(err =>{
                        console.log(err)
                    })
                } else {
                    return false;
                }
            });
        },
        setSelectManager(){

        },
        selectMemberCallback(res,indexClose,obj){
            console.log(res,"---");
            this.ruleForm.managerId = obj.userId;
            this.ruleForm.managerName = obj.name;
            this.closeModal(indexClose);
            // if(!!res != true)return;
            // let json = {
            //     projectId:this.projectId,
            //     userId:res
            // }
            // this.$http.post("/project//project/user/add",json).then(res =>{
            //     if(res.statusCode == 200){
            //         this.$message({
            //             message: '添加成功成功',
            //             type: 'success'
            //         });
            //         this.getMemberList();
            //     }
            // }).catch(err =>{
            //     console.log(err)
            // })
        },
    }
}
</script>

<style scoped type="text/scss" lang="scss">
.main {
    position: absolute;
    background-color: #FFFFFF;
    border-radius: 6px;
    width: 608px;
    height: 656px;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    padding: 32px 32px 0 32px;
    > .title {
        line-height: 1.1;
        font-size: 16px;
        color: #454a55;
        position: relative;
        height: 48px;
        font-weight: 600;
        > i {
            background-size: 16px 17px;
            background-position: center;
            background-repeat: no-repeat;
            position: absolute;
            width: 16px;
            height: 17px;
            background-image: url("~@/assets/img/close_icon.png");
            top: 0px;
            right: 0px;
            cursor: pointer;
        }
    }

    .form {
        .el-form-item__label {
            padding-right: 16px;
        }
        .modal-btns{
            display: flex;
            flex-direction:row-reverse;
        }
        .cancel-btn, .save-btn {
            display: inline-block;
            border-radius: 6px;
            width: 88px;
            line-height: 32px;
            text-align: center;
            cursor: pointer;
        }
        .save-btn {
            background-color: #0755db;
            color: #FFFFFF;
        }
        .cancel-btn {
            color: #b3c0c9;
        }
        .add-manager {
            // position: absolute;
            width: 38px;
            height: 38px;
            background-image: url("~@/assets/img/project/add_manager_icon1.png");
            background-size: 38px 38px;
            background-repeat: no-repeat;
            background-position: center;
            cursor: pointer;
        }
        .add-manager:hover{
            background-image: url("~@/assets/img/project/add_manager_icon2.png");
        }
    }
}
</style>
<style lang="scss" type="text/scss">
.project_info_jbxx{
    .form {
        .el-form-item__label {
            padding-right: 16px;
        }
        .el-input__inner, .el-textarea__inner {
            width: 400px;
            background-color: #f2f6f9;
        }
        .el-date-editor--date, .el-date-editor--time {
            .el-input__inner {
                width: 176px;
            }
        }
        .el-input__inner:focus, .el-textarea__inner:focus {
            background-color: #FFFFFF;
        }
        .line-time {
            width: 20px;
        }
    }
}
</style>
